<!--
 * @Author: your name
 * @Date: 2021-07-06 16:51:17
 * @LastEditTime: 2021-07-07 09:07:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \CSS-DAY06\后台管理系统.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>啡快常见问题管理</title>
    <link rel="stylesheet" href="common.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1327450_9qlr53v4dy.css">
    
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <script src="bootstrap-4.5.0-dist/js/bootstrap.js"></script>
	
	<style>
		html,body,.container {
			height: 100%;
		}
		.container {
			position: relative;
		}
		.top {
			height: 120px;
			background-color: #026241;
			color: #ffffff;
		}
		.top > .logo {
			font-size: 26px;
			line-height: 120px;
			padding: 0 1em;
		}
		.content {
			position: absolute;
			top: 120px;
			bottom: 0;
			width: 100%;
		}
		.left {
			width: 220px;
			background-color: #ffffff;
			height: 100%;
			float: left;
			font-size: 14px;
		}
        .left ul{
            list-style: none;
            
        }
		.left > ul.left-nav {
			text-align: center;
		}
		.left > ul.left-nav > li {
			line-height: 3em;
			border-bottom: 1px solid #cccccc;
			position: relative;
		}
		.left > ul.left-nav > li i.iconfont {
			position: absolute;
			left: 3em;
		}
		.left > ul.left-nav > li.current,
		.left > ul.left-nav > li:hover {
			background-color: #cccccc;
			color: #ffffff;
		}
		.left > ul.left-nav > li.current a,
		.left > ul.left-nav > li:hover a {
			color: #ffffff;
		}

		.right {
			margin-left: 220px;
			height: 800px;
			overflow-y: auto;
			padding: 1em;
			box-sizing: border-box;
			background-color: #cccccc;
		}
		.wrapper {
			background-color: #ffffff;
			border-radius: 5px;
			padding: 1em;
			height: 100%;
		}

		.btns {
			margin-bottom: .5em;
			color: #3a9497;
		}
		.btn.btn-primary{
			background-color: #026241;
			border: darksalmon;

		}
		
		img{
			width: 25px;
			height: 25px;
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="top">
			<div class="logo">
				星巴克后台管理系统
			</div>
		</div>
		<div class="content">
			<div class="left">
				<ul class="left-nav">
					<li class="current">
						<!-- <i class="iconfont icon-xingbake"></i> -->
						<a href="">啡快常见问题管理</a>
					</li>
					<li>
						<!-- <i class="iconfont icon-xingbake-xuangouyinpin"></i> -->
						<a href="zxs-serve.html">专星送服务管理</a>
					</li>
					<li><a href="sh-bean.html">上海烘焙工坊管理</a></li>
				
				</ul>
			</div>
			<div class="right">
				<div class="wrapper">
					<!-- 按钮组 -->
					<!-- <div class="btns">
						<div class="btn">添加</div>
						<div class="btn">批量删除</div>
					</div> -->
					<!-- Button trigger modal -->
                <div class="btns">
					<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
	                添加
                    </button>
  
                <!-- Modal -->
                <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	                <div class="modal-dialog">
	  					<div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="staticBackdropLabel">确定要添加该条信息吗？</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
			<table>
				<thead class="table">
					<tr>
						<td>选择</td>
						<td>门店名称</td>
						<td>到店取/在线送</td>
						<td>联系方式</td>
						<td>操作</td>
					</tr>	
				</thead>
				<tbody>
					<tr>
						<td> <input type="checkbox"></td>
						<td>南京平安金融中心店</td>
						<td>到店取</td>
						<td>025-83784841</td>
						<td>
							<img src="./images/bianjicopy.png" alt="">
							<img src="./images/shanchu.png" alt="">
						</td>
					</tr>
				</tbody>	
			</table>

		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		  <button type="button" class="btn btn-primary">确定</button>
		</div>
	  					</div>
					</div>
                </div>

				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
	                删除
                    </button>
  
                <!-- Modal -->
                <div class="modal fade" id="delete" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	                <div class="modal-dialog">
	  					<div class="modal-content">
		<div class="delete-header">
		  <h5 class="delete-title" id="delete">确定要删除该条信息吗？</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="delete-body">
			<table class="table">
				<thead>
					<tr>
						<td>选择</td>
						<td>门店名称</td>
						<td>到店取/在线送</td>
						<td>联系方式</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td> <input type="checkbox"></td>
						<td>南京TT Center</td>
						<td>到店取</td>
						<td>025-85795330</td>
						<td>
							<img src="./images/bianjicopy.png" alt="">
							<img src="./images/shanchu.png" alt="">
						</td>
					</tr>
					<tr>
						<td> <input type="checkbox"></td>
						<td>南京平安金融中心店</td>
						<td>到店取</td>
						<td>025-83784841</td>
						<td>
							<img src="./images/bianjicopy.png" alt="">
							<img src="./images/shanchu.png" alt="">
						</td>
					</tr>
					<tr>
						<td> <input type="checkbox"></td>
						<td>南京友谊广场店</td>
						<td>到店取</td>
						<td>025-58793137</td>
						<td>
							<img src="./images/bianjicopy.png" alt="">
							<img src="./images/shanchu.png" alt="">
						</td>
					</tr>
					<tr>
						<td> <input type="checkbox"></td>
						<td>南京平安金陵店</td>
						<td>到店取</td>
						<td>025-84700035</td>
						<td>
							<img src="./images/bianjicopy.png" alt="">
							<img src="./images/shanchu.png" alt="">
						</td>
					</tr>
					<tr>
						<td> <input type="checkbox"></td>
						<td>南京中海环字城店</td>
						<td>到店取</td>
						<td>025-84700817</td>
						<td>
							<img src="./images/bianjicopy.png" alt="">
							<img src="./images/shanchu.png" alt="">
						</td>
					</tr>
					<tr>
						<td> <input type="checkbox"></td>
						<td>南京东方福来德店</td>
						<td>到店取</td>
						<td>025-58761883</td>
						<td>
							<img src="./images/bianjicopy.png" alt="">
							<img src="./images/shanchu.png" alt="">
						</td>
					</tr>
				</tbody>
			</table>
		 </div> 
		<div class="delete-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		  <button type="button" class="btn btn-primary">确定</button>
		</div>
	  					</div>
					</div>
                </div>
</div>
  
					<!-- 表格区域 -->
					<table class="table">
						<thead>
							<tr>
								<td>选择</td>
								<td>门店名称</td>
								<td>到店取/在线送</td>
								<td>联系方式</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							
							<tr>
								<td> <input type="checkbox"></td>
								<td>南京平安金融中心店</td>
								<td>到店取</td>
								<td>025-83784841</td>
								<td>
									<img src="./images/bianjicopy.png" alt="">
									<img src="./images/shanchu.png" alt="">
								</td>
							</tr>
							<tr>
								<td> <input type="checkbox"></td>
								<td>南京TT Center</td>
								<td>到店取</td>
								<td>025-85795330</td>
								<td>
									<img src="./images/bianjicopy.png" alt="">
									<img src="./images/shanchu.png" alt="">
								</td>
							</tr>
							<tr>
								<td> <input type="checkbox"></td>
								<td>南京平安金融中心店</td>
								<td>到店取</td>
								<td>025-83784841</td>
								<td>
									<img src="./images/bianjicopy.png" alt="">
									<img src="./images/shanchu.png" alt="">
								</td>
							</tr>
							<tr>
								<td> <input type="checkbox"></td>
								<td>南京友谊广场店</td>
								<td>到店取</td>
								<td>025-58793137</td>
								<td>
									<img src="./images/bianjicopy.png" alt="">
									<img src="./images/shanchu.png" alt="">
								</td>
							</tr>
							<tr>
								<td> <input type="checkbox"></td>
								<td>南京平安金陵店</td>
								<td>到店取</td>
								<td>025-84700035</td>
								<td>
									<img src="./images/bianjicopy.png" alt="">
									<img src="./images/shanchu.png" alt="">
								</td>
							</tr>
							<tr>
								<td> <input type="checkbox"></td>
								<td>南京中海环字城店</td>
								<td>到店取</td>
								<td>025-84700817</td>
								<td>
									<img src="./images/bianjicopy.png" alt="">
									<img src="./images/shanchu.png" alt="">
								</td>
							</tr>
						</tbody>
					</table>
					<!-- 分页 -->

				</div>
			</div>
		</div>
	</div>
</body>
</html>
